<template>
	<!-- 法律咨询 -->
	<div class="container">
		<div class="statusbar clearfix">
			<div class="w25 back" @click="fnBack()">
				<img src="../../assets/icon/back@2x.png" alt="">
				<span>返回</span>
			</div>
			<div class="w50 topcenter">
				<span>法律咨询</span>
			</div>
			<!--<div class="w25">
				<span class="topsub" @click="consult">提交</span>
			</div>-->
		</div>
		<div class="wrap" style="margin-top: 3.3rem;">
			<div class="search clearfix">
				<div class="row clearfix">
					<span>咨询分类</span>
					<div class="sear_input">
						<el-select v-model="value" clearable placeholder="请选择" @change='changen'>
							<el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="row clearfix">
					<span>指定律师</span>
					<div class="sear_input">
						<el-select v-model="value1" clearable placeholder="请选择">
							<el-option v-for="item in options1" :key="item.id" :label="item.lawyerName" :value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="row clearfix">
					<span>标题</span>
					<div class="sear_input">
						<el-input size="small" clearable placeholder="请输入需要标题" v-model="titles">
						</el-input>
					</div>
				</div>
				<div class="row clearfix">
					<span>内容</span>
					<div class="sear_input">
						<el-input size="small" type="textarea" clearable placeholder="请输入内容" v-model="question">
						</el-input>
					</div>
				</div>
				<div class="row clearfix">
					<span>姓名</span>
					<div class="sear_input">
						<el-input size="small" clearable placeholder="请输入姓名" v-model="names">
						</el-input>
					</div>
				</div>
				<div class="voice">
					<div class="plays" v-if="shows">
						<button @click='paly'><img src="../../assets/bofnag.png" />{{timds}}s</button>
						<span class="clones" @click="clons"><img src="../../assets/clones_03.png" /></span>
					</div>
					<button @click='viod' v-if="ssta"><img src="../../assets/yuyin.png" />点击录音</button>
					<button @click='outs' v-else><img src="../../assets/yuyin.png" />正在录音，再次点击结束录音</button>
				</div>
				<div class="row" style="padding-bottom: 2rem;">
					<button @click="consult">提交</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Api from "../../kites/api";
export default {
  name: "leAdvi",
  data() {
    return {
      names: "", //姓名
      question: "", //内容
      titles: "", //标题
      id: "",
      options: [],
      value: "", //分类
      options1: [],
      value1: "", //律师
      localId: "",
      START: "",
      recordTimer: "",
      END: "",
      ssta: true,
      timds: "",
      shows: false,
      serverId: ""
    };
  },
  beforeCreate() {
    this.openIds();
  },
  mounted() {
    this.weixin();
    this.id = this.$route.query.id;
    this.GetSelectionDatasByType();
    //			this.GetAllLawyers()
  },
  methods: {
    //获取分类
    GetSelectionDatasByType() {
      this.$post(Api.GetSelectionDatasByType, {
        type: 5
      }).then(res => {
        console.log(res);
        if (res.data.success == true) {
          this.options = res.data.result;
        } else {
          this.$message.error(res.data.error);
        }
      });
    },
    changen() {
      console.log(this.value);
      this.GetAllLawyers();
    },
    //获取律师列表
    GetAllLawyers() {
      this.options1 = [];
      this.$post(Api.SearchLawyer, {
        filter: "",
        skillType: this.value
      }).then(res => {
        if (res.data.success == true) {
          this.options1 = res.data.result;
        } else {
          this.$message.error(res.data.error);
        }
      });
    },
    //返回上一页
    fnBack() {
      this.$router.go(-1);
    },

    //咨询
    consult() {
      if (!this.ssta) {
        this.$message.error("录音未结束");
        return false;
      }
      if (this.value == "") {
        this.$message.error("咨询不能为空");
        return false;
      }
      if (this.titles == "") {
        this.$message.error("标题不能为空");
        return false;
      }
      if (this.question == "") {
        this.$message.error("内容不能为空");
        return false;
      }
      if (this.names == "") {
        this.$message.error("姓名不能为空");
        return false;
      }
      this.$post(Api.AddOnlineQuestion, {
        title: this.titles,
        question: this.question,
        userName: this.names,
        openId: localStorage.openID,
        lawyerId: this.value1,
        consultType: this.value,
        serviceId: this.serverId
      }).then(res => {
        if (res.data.success == true) {
          this.names = "";
          this.question = "";
          this.titles = "";
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$router.push({
            path: "/Consultation/" + this.id
          });
        } else {
          this.$message.error(res.data.error);
        }
      });
    },
    //weixinApi
    weixin() {
      var urls = window.location.href;
      this.$post(Api.jsconfig, {
        url: urls
      }).then(res => {
        console.log(res);
        if (res.data.success == true) {
          wx.config({
            debug: false, // 开启调试模式
            appId: res.data.result.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.result.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.result.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.result.data.signature, // 必填，签名，见附录1
            jsApiList: [
              "startRecord",
              "stopRecord",
              "onVoiceRecordEnd",
              "playVoice",
              "pauseVoice",
              "stopVoice",
              "onVoicePlayEnd",
              "uploadVoice",
              "downloadVoice"
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
        }
      });
      wx.ready(function() {
        wx.onVoiceRecordEnd({
          // 录音时间超过一分钟没有停止的时候会执行 complete 回调
          complete: function(res) {
            this.localId = res.localId;
            console.log("自动停止-》 录音结果：", localId);
          }
        });
        wx.onVoicePlayEnd({
          success: function(res) {
            var localId = res.localId; // 返回音频的本地ID
            console.log("完毕");
          }
        });
        /**
         * config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
         * config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口， 则须把相关接口放在ready函数中调用来确保正确执行。
         * 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
         */
      });
    },
    //开始录音
    viod() {
      var $this = this;
      this.timds = "";
      this.shows = false;
      $this.START = new Date().getTime();
      console.log($this.START);
      this.recordTimer = setTimeout(function() {
        wx.startRecord({
          success: function() {
            localStorage.rainAllowRecord = "true";
            $this.ssta = false;
            console.log("开始录音");
          },
          cancel: function() {
            alert("用户拒绝授权录音");
          }
        });
      }, 300);
    },
    //结束录音
    outs() {
      var $this = this;
      this.END = new Date().getTime();
      console.log($this.END);

      if ($this.END - $this.START < 1000) {
        $this.END = 0;
        $this.START = 0;
        //小于300ms，不录音
        clearTimeout($this.recordTimer);
      } else {
        wx.stopRecord({
          success: function(res) {
            $this.localId = res.localId;
            $this.ssta = true;
            console.log("结束录音");
            $this.timds = (($this.END - $this.START) / 1000).toFixed(1);
            $this.shows = true;
            $this.shnag();
          },
          fail: function(res) {
            alert(JSON.stringify(res));
          }
        });
      }
    },
    //播放录音
    paly() {
      var $this = this;
      if ($this.localId) {
        console.log("播放录音");
        wx.playVoice({
          localId: $this.localId
        });
      }
    },
    clons() {
      var $this = this;
      this.localId = "";
      this.timds = "";
      $this.serverId = "";
      this.shows = false;
      wx.stopVoice({
        localId: $this.localId // 需要停止的音频的本地ID，由stopRecord接口获得
      });
    },
    //上传
    shnag() {
      var $this = this;
      wx.uploadVoice({
        localId: $this.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function(res) {
          //把录音在微信服务器上的id（res.serverId）发送到自己的服务器供下载。
          $this.serverId = res.serverId;
          console.log($this.serverId);
          $.ajax({
            url: Api.files,
            type: "post",
            data: JSON.stringify($this.serverId),
            dataType: "json",
            success: function(data) {
              console.log(data);
              console.log("文件已经保存到的服务器"); //这回，我使用七牛存储
            },
            error: function(xhr, errorType, error) {
              console.log(error + "1");
            }
          });
        }
      });
    },

    //下载
    xia() {
      wx.downloadVoice({
        serverId: "", // 需要下载的音频的服务器端ID，由uploadVoice接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function(res) {
          var localId = res.localId; // 返回音频的本地ID
        }
      });
    }
    //
  }
};
</script>
<style scoped>
.wrap {
  padding-bottom: 0;
}

.search {
  padding: 0.8rem 1.25rem;
}

.search .row {
  margin: 0.8rem 0;
}

.search .row span {
  display: inline-block;
  width: 22%;
  color: #666666;
  font-size: 1.25rem;
  text-align: left;
  /*line-height: 2.6rem;*/
}

.row .sear_input {
  width: 76%;
  float: right;
}

.row .sear_date {
  width: 40% !important;
  float: right;
  position: relative;
}

.row .sear_date i {
  font-style: normal;
  position: absolute;
  right: 2px;
  top: 6px;
  font-size: 21px;
  color: #666666;
}

.row .sear_date input {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 0.3rem;
  height: 2.5rem;
  line-height: 2.5rem;
  outline: none;
  background: #fff;
}

.row:last-child {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.row button {
  border-radius: 0.8rem;
  width: 45%;
  outline: none;
  border: none;
  color: #ffffff;
  font-size: 1.25rem;
  padding: 0.4rem 0;
}

.row button:nth-child(1) {
  background-color: #38589e;
  /* border: 1px solid #39589e; */
}

.row button:nth-child(2) {
  background-color: #34ab95;
  /* border: 1px solid #34ab95; */
}
</style>